<!-- <template>
  <div ref="title">{{titleMessage}}</div>
  <button @click="btnClick">{{ changeInfo }}</button>
 <Header ref="component"></Header>
<button @click="GetKey">获取组件元素</button>
</template>
<script>
import Header from './Components/hearder.vue'
export default
{
    data() {
      return {
        titleMessage: "我是标题",
        changeInfo:"改变标题样式"
      }
    },
    methods: {
      btnClick()
      {
        const titleEl = this.$refs.title;
        const text = titleEl.textContent;
        // console.log(text === this.titleMessage);
        // console.log(typeof text);
        titleEl.textContent = text === this.titleMessage ? "我不是标题" : this.titleMessage;
      },
      GetKey()
      {
        const componentEl = this.$refs.component;
        componentEl.log();
         
      }
    },
    components:
    {
       Header,
    }
}
</script>
<style scoped>
</style> -->

<!-- 动态组件 
<template>
 <button @click="currentIndex=0" :class="{active:currentIndex===0}">home</button>
 <button @click="currentIndex=1" :class="{active:currentIndex===1}">about</button>
 <button @click="currentIndex=2" :class="{active:currentIndex===2}">category</button>
<keep-alive include="home">
 <component :is="tabs[currentIndex]"></component>
</keep-alive>
</template>
<script>
import home from './Components/home.vue'
import about from './Components/about.vue'
import category from './Components/category.vue'
export default
  {
    data() {
      return {
        currentIndex: 0,
        tabs:["home","about","category"]
      }
    },
    components: {
      home,
      about,
      category
    }
}
</script>
<style scoped>
.active
{
  color:red;
}
</style> -->

<!-- 双向绑定组件 -->
<!-- <template>
  <son-component  v-model="message"></son-component>
  <h1>{{ Mixmessage }}</h1>
  
</template>
<script>
import SonComponent from './Components/v-model/son.vue'
import mixMessage from './js/mix'
export default
  {
    //混入消息
    mixins:[mixMessage],
    
    components:
  {
       SonComponent,    
  },
  data() {
    return {
        message:"初始消息"
    }
    },
  methods: {
     
  },
}
</script>
<style scoped>
</style> -->

<!-- <template> -->
  <!-- 使用 -->
  <!-- <h1>{{ Mixmessage }}</h1>
</template>
<script> -->
<!-- 引入混入数据 -->
<!-- import mixObject from './js/mix'
export default
{  
    //注册
   mixins:[mixObject] 
}
</script>
<style scoped>
</style> -->

<template>
 <!-- <div> {{data.name}}</div> -->
 <readonly-component :data="readonlyObj" v-if="data!==undefined"></readonly-component>
</template>
<script>
import { readonly ,ref} from "vue";
import ReadonlyComponent from '../src/Components/Readonly.vue'
export default {
  components:
  {
    ReadonlyComponent
  },
  setup() {
    //定义复杂类型
    const obj = ref({
      name: "cq",
      age: 18,
    });
    //使用readonly修饰
    const readonlyObj = readonly(obj);
    // console.log(data);
    //返回
    return { readonlyObj };
  },
};
</script>
<style scoped>
</style>